<template>
  <div class="page-container" v-global-loading="loading">
    <div class="page-card-container">
      <a-form :model="pageSet" layout="inline">
        <a-form-item label="会员名称">
          <a-input
            v-model:value="pageSet.memberName"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="登录时间">
          <a-range-picker
            v-model:value="pageSet.date"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-warning" @click="loadPagination(true)">
            查询
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="reset">重置</div>
        </a-form-item>
      </a-form>
      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        :scroll="{
          x: 1200,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
      </a-table>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, inject, onActivated, onMounted} from "vue";
import Pagination from "@/components/pagination/Pagination.vue";
import useAppStore from "@/store/app";
import {memberLoginLogPage} from "@/api/logFile/entryLog";
const calcCanUseHeight: any = inject("calcCanUseHeight");
onActivated(() => {
  calcCanUseHeight();
});
onMounted(() => {
  calcCanUseHeight();
});
//重置
const reset = () => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0
  };
  loadPagination();
};
const loading = ref(false);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0
});
const tableLoading = ref<boolean>(false);
const tableData = ref<Array<object>>([]);
//获取数据
const loadPagination = (flag?: boolean): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  if (pageSet.value.date) {
    pageSet.value.beginDate = pageSet.value.date[0];
    pageSet.value.endDate = pageSet.value.date[1];
  } else {
    pageSet.value.beginDate = null;
    pageSet.value.endDate = null;
  }
  tableLoading.value = true;
  memberLoginLogPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination(true);
//操作

const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "会员名称",
    dataIndex: "memberName",
    align: "center",
    width: 200
  },
  {
    title: "操作系统",
    dataIndex: "os",
    align: "center",
    width: 120
  },
  {
    title: "浏览器",
    dataIndex: "browser",
    align: "center",
    width: 200
  },
  {
    title: "IP地址",
    dataIndex: "remoteIp",
    align: "center",
    width: 120
  },
  // {
  //   title: "登录地点",
  //   dataIndex: "location",
  //   align: "center",
  //   width: 120
  // },
  {
    title: "登录时间",
    dataIndex: "createdTime",
    align: "center",
    width: 120
  },
  {
    title: "执行状态",
    dataIndex: "status",
    align: "center",
    width: 120
  },
  {
    title: "备注",
    dataIndex: "remark",
    align: "center",
    width: 120
  }
]);
</script>

<style lang="less" scoped></style>
